<template>
	<div>provide & v-model</div>
	<div>aaa: {{ aaa }}</div>

	<div>obj: {{ obj }}</div>

	<div class="child">
		<child_1></child_1>
	</div>
	<div class="child">
		<child_2></child_2>
	</div>
		
	<hr>	
	<hr>	
	<h3>v-model</h3>
	<div class="child">
		{{ modelValue }}
		<br>
		{{ modelValue_aaa  }}
		<br>
		{{ modelValue_obj }}
		<div class="child">
			<child_model v-model="modelValue" v-model:modelValue_aaa="modelValue_aaa" v-model:modelValue_obj="modelValue_obj"></child_model>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, provide } from 'vue'
	import child_1 from '../provide/child_1.vue'
	import child_2 from '../provide/child_2.vue'
	import child_model from '../provide/child_model.vue'
	
	let aaa = ref(111)
	setTimeout(function() {
		aaa.value = 1
	}, 2000);
	let modelValue = ref('modelValue')
	let modelValue_aaa = ref('modelValue_aaa')
	let modelValue_obj = reactive({
		a: 111,
		b: 222
	})
	
	provide('aaa', aaa)

	let obj = reactive({
		a: 1,
		b: 2
	})
	provide('obj', obj)
</script>

<style lang="scss" scoped>
	.child{
		outline: 1px solid red;
		margin: 10px 0;
	}
</style>